<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model="listQuery.turnId"
        placeholder="开奖轮次"
        style="width: 200px;"
        class="filter-item"
      />
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 250px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="红包开奖ID" prop="roomId"> </el-table-column>
        <el-table-column align="center" label="轮次" prop="turnId"> </el-table-column>
        <el-table-column align="center" label="开奖几率" prop="paketRatio">
          <template slot-scope="{row}">
            <span>{{ row.paketRatio / 1000 }} %</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开奖前红包奖池" prop="paketPool"> </el-table-column>
        <el-table-column align="center" label="红包领取个数" prop="redPaketNum"> </el-table-column>
        <el-table-column align="center" label="红包领取总金额" prop="robTotalPrice">
          <template slot-scope="{row}">
            <span>{{ row.robTotalPrice > 0 ? row.robTotalPrice : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="平均红包金额">
          <template slot-scope="{row}">
            <span v-if="row.redPaketNum > 0">{{ (row.robTotalPrice / row.redPaketNum).toFixed(2) }}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开奖时间" prop="dateTime">
          <template slot-scope="{row}">
            <span>{{ row.dateTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="onGoDetail(row.turnId, row.roomId, row.dateTime)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <el-dialog title="参与用户" width="60%" :visible.sync="dialogCheckApply">
      <el-table
        :data="dialogCheckData.list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用户ID" prop="accountId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.accountId" />
          </template>
        </el-table-column>

        <el-table-column align="center" label="用户昵称" prop="nickName"> </el-table-column>

        <el-table-column align="center" label="性别" prop="winnerId">
          <template slot-scope="{row}">
            <span>{{ row.gender | gender }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="是否机器人" prop="winnerId">
          <template slot-scope="{row}">
            <span>{{ row.isRobot ? '是': '否' }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="红包金额" prop="robPrice"> </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import { xhrGetTurnRedPacket, xhrGetTurnRedPacketItem } from '@/api/analysis'
export default {
  name: 'RedEnvelopesRecord',
  components: { TablePagination },
  data() {
    return {
      daterangeValue: '',
      list: [],
      dialogCheckApply: false,
      dialogCheckData: {
        list: []
      },
      total: 0,
      listQuery: {
        offset: 0,
        limit: 100,
        startTime: null,
        endTime: null,
        turnId: null
      }
    }
  },

  created() {
    this.doSearch()
  },

  methods: {
    doSearch() {
      xhrGetTurnRedPacket(this.listQuery).then(resp => {
        console.log(resp)
        this.total = resp.data.count
        this.list = resp.data.list
        this.listLoading = false
      }).catch(resp => {
        console.log(resp)
        this.listLoading = false
      })
    },
    onGoDetail(turnId, roomId, datetime) {
      console.log(turnId, roomId, datetime)
      xhrGetTurnRedPacketItem({
        turnId: turnId, roomId: roomId, datetime: datetime
      }).then(resp => {
        this.dialogCheckData.list = resp.data.list
        this.dialogCheckApply = true
      }).catch(resp => {
        console.log(resp)
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
